<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS的容器样式</title>
  <style>
    /*常用的容器样式*/
    #d1 {
      /*border表示边框:值由三部分组成，用空格隔开 粗细 类型(solid,dotted,dashed) 颜色*/
      border:1px solid #223388;
      width: 900px;
      height:600px;
      /* background: #eee; */
      /*背景会自动填充
        如果不想填充，可以使用repeat-x表示，只是在x轴填充 repeat-y表示只是在y轴填充
        如果完全不填充使用no-repeat
        如果希望设置背景的位置可以使用background-position来设置
        如果除了背景图片外还希望加背景颜色，在url之前添加颜色
      */
      background:#733 url(ca02.jpg) no-repeat;
      /*
      background-position: 10px 50%;表示离左边有10个像素，上下居中
      */
      background-position: 50% 50%;
    }
    #d2 {
      /*边框还可以单独写某一个位置*/
      /* border-top:5px dotted #983333; */
      /*
      border-left border right
      */
      border:2px dashed #933;
      width: 200px;
      height:200px;
    }
    span{
      border:1px solid #393;
      /*span是文本容器，默认情况无法设置宽和高
        如果要设置宽和高，要把span变为普通容器，使用display:block;
      */
      /* display:block; 在实际的应用中很少这样用，如果一个span要设置为block，不如直接使用div */
      width: 300px;
      height:300px;
    }
  </style>
</head>
<body>
  <!--div和span对文本没有进行任何修饰，它们存在的意义就是专门用来编写样式和进行布局的
    div和span最大的区别就是，div占完整的一行，而span只占有行中的一块空间，span这种容器，称为文本容器
  -->
  <div id="d1">这是一个div容器</div> <br>
  <div id="d2">这是第二个div容器</div> <br>
  <span>
    这是一个span容器
  </span> 
  <span>这是另一个span</span>
</body>
</html>